<template>
	<view>
	<!-- <view class="serwch">
		<my-cearch @goSearch="goSearch" ></my-cearch>
	</view> -->
<view class="swiper_box">
	
	
	<swiper  :circular="true" :indicator-dots="true"
	indicator-active-color="#C00000"
	:autoplay="true" :interval="3000" :duration="1000" >
		<swiper-item class="swiper_item" v-for="(item,index) in swrperData" :key="index" >
			
				<navigator :url= "`/subpkg/goodes_details/goodes_details?goods_id=${item.goods_id}`">
					 
					<image class="sw_image" :src="item.image_src" mode=""></image>
				</navigator>
				
			
		</swiper-item>
	
	</swiper> 
	
</view>

<!-- 导航栏区域 -->
<!-- <view class="fenye1">
<view class="fenyue2" v-for="(item,index) in navData" :key="index" @click="navClickHandler(item)">
<view>
	<image class="fenyue2_img" :src="item.image_src" mode=""></image>
</view> 
	
</view>


</view> -->

<!-- 楼层区域 -->
<view class="floor-list">
  <!-- 楼层 item 项 -->
  <view class="floor-item" v-for="(item, i) in louchengData" :key="i">
    <!-- 楼层标题 -->
    <image :src="item.floor_title.image_src" class="floor-title"></image>
	
	<!-- 楼层图片区域 -->
	<view class="floor-img-box">
	  <!-- 左侧大图片的盒子 -->
	  
	  <navigator class="left-img-box" :url="item.product_list[0].url">
		  
		 
		    <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
		 
	  </navigator>
	  
	  
	  <!-- 右侧 4 个小图片的盒子 -->
	  <view class="right-img-box">
	    <navigator :url="item2.url" class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0">
	     
		<!-- <view class="">
		 	{{item2.url}}
		 </view -->
		  <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
	    </navigator>
	  </view>
	</view>
  </view>
</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/index.js'
	
	export default {
		
		mixins:[badgeMix],
		data() {
			return {
				
				dianColor:'#C00000',
				// 轮播数据
				swrperData:[],
				// 导航栏数据
				navData:[],
				// 楼层数据	
				louchengData:[]
			};
		},onLoad(){
			
			this.lunbo()
			// 导航栏
			this.navigation()
			this.loucheng()


		},
		methods:{
			// 获取轮播数据
			async lunbo(){
				
				
				const {data} =await uni.$http.get('/api/public/v1/home/swiperdata')
		this.swrperData=data.message
		
		
			},
			
			// 搜索跳到详情
			goSearch(){
		
				uni.navigateTo({
					url:`/subpkg/se4arch/se4arch`
				});
			},
		// 获取导航栏数据	
			async navigation(){
				
			const {data}= await uni.$http.get('/api/public/v1/home/catitems')
			
			this.navData=data.message
			console.log(this.navData);
			},
			// 获取楼层数据
			async loucheng(){
				
				const {data} = await uni.$http.get('/api/public/v1/home/floordata')
			this.louchengData=data.message
			this.louchengData.forEach((item)=>{
				item.product_list.forEach((item)=>{
					
					item.url='/goods_list/goods_list/goods_list?'+ item.navigator_url.split('?')[1]
				})
			})
		
			},
			// 点击分类跳转到nav分类
			navClickHandler(item){
				if(item.name==='分类'){
				uni.switchTab({
				     url: '/pages/cate/cate'
				   })
				}
				
			}
		}
		
	}
</script>

<style lang="scss">
.swiper_item{height: 150px;
.sw_image{
	width: 100%;
	height: 150px;
}
}

.fenye1{
	
	padding: 0 5px;
	display: flex;
	justify-content: space-between;
	
		
	.fenyue2{
		display: flex;
		
		flex-direction:column;
		margin-top: 20px;
		
		.fenyue2_img{
		width: 128rpx;
		    height: 140rpx;
		}
	}
}
.floor-title {
  height: 60rpx;
  width: 100%;
  display: flex;
}
.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}
 .serwch{
	 position: sticky;
	 
	 top: 0;
	 z-index: 9999;
 }
</style>
